<template>
  <div class="d-flex-col flex-grow-1">
      <chart width="100%"
             height="150px"
             v-show="expended"
             ref="chart"></chart>
    <app-divider>
      <div class="iconfont"
         :class="{ 'icon-zhankai1': expended, 'icon-arrow-up1': !expended }"
         @click="expended = !expended"></div>
    </app-divider>
    <app-tab class="d-flex-col flex-grow-1"
             :active="active">
        <!-- <app-tab-pane :label="$t('bill.tabTitle')"
                   name="bill"
                   :class="computeClass('bill')"
                   class="flex-grow-1"
                   :lazy="true">
        <bill ref="bill"
               class="flex-grow-1"></bill>
      </app-tab-pane> -->
      <app-tab-pane :label="$t('asset.tabTitle')"
                   name="asset"
                   iconClass="iconfont icon-zichanqingkuang"
                   class="d-flex-col flex-grow-1">
        <asset @updated="dataUpdated()"
               ref="asset"
               class="flex-grow-1"></asset>
      </app-tab-pane>
      <app-tab-pane :label="$t('liability.tabTitle')"
                   name="liability"
                   iconClass="iconfont icon-zhaiquanzhaiwu"
                   class="d-flex-col flex-grow-1">
        <liability @updated="dataUpdated()"
              ref="liability"
              class="flex-grow-1"></liability>
      </app-tab-pane>
      <app-tab-pane :label="$t('income.tabTitle')"
                   name="income"
                   iconClass="iconfont icon-shouru"
                   class="d-flex-col flex-grow-1"
                   :lazy="true">
        <income @updated="dataUpdated()"
                ref="income"
                class="flex-grow-1"></income>
      </app-tab-pane>
      <app-tab-pane :label="$t('borrow.tabTitle')"
                   name="borrow"
                   iconClass="iconfont icon-jiechu"
                   class="d-flex-col flex-grow-1">
        <borrowing @updated="dataUpdated()"
                   ref="borrow"
                   class="flex-grow-1"></borrowing>
      </app-tab-pane>
      <!-- <app-tab-pane :label="$t('investment.tabTitle')"
                   name="investment"
                   :class="computeClass('investment')"
                   class="flex-grow-1"
                   :lazy="true">
        <investment @updated="dataUpdated()"
                    ref="investment"
                    class="flex-grow-1"></investment>
      </app-tab-pane> -->
    </app-tab>
  </div>
</template>
<script>
// import Investment from '@/components/financialSituation/Investment'
// import Bill from '@/components/financialSituation/Bill'
import Asset from '@/components/financialSituation/Asset'
import Liability from '@/components/financialSituation/Liability'
import Income from '@/components/financialSituation/Income'
import Borrowing from '@/components/financialSituation/Borrowing'
import Chart from '@/components/financialSituation/Chart'
import AppDivider from '@/components/common/AppDivider'
import AppTab from '@/components/common/tabs/AppTab'
import AppTabPane from '@/components/common/tabs/AppTabPane'
export default {
  data () {
    return { expended: true, active: 'asset' }
  },
  components: {
    // Bill,
    Asset,
    Liability,
    // Investment,
    Income,
    Borrowing,
    Chart,
    AppDivider,
    AppTab,
    AppTabPane
  },
  methods: {
    dataUpdated () {
      this.$refs.chart.getNetAssets()
    },
    computeClass (name) {
      return this.active === name ? 'd-flex-col' : ''
    }
  }
}
</script>
<style>
.app-tab__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
</style>
